Styling Invalid Form Inputs Using :invalid Pseudo-Class in CSS
You can style invalid form inputs directly using the :invalid pseudo-class in CSS. It allows you to provide visual feedback for inputs that fail HTML5 validation constraints without needing JavaScript.
:invalid– Selects form elements whose current value does not satisfy HTML validation requirements (e.g., required fields, pattern mismatches, min/max values).:valid– Can be used alongside:invalidto style inputs that pass validation.Styles update dynamically as users interact with the form, giving immediate feedback.
In this example, the email and age fields automatically receive a red border and light red background when their values are invalid, and a green border with light green background when valid, giving clear visual cues to the user.
Combine
:invalidwith:validto give real-time validation feedback.Use additional pseudo-classes like
:requiredor:optionalfor better user guidance.Ensure that color cues are accessible; consider adding icons or text messages for users with color vision deficiencies.
Test across browsers, as some older browsers may not fully support HTML5 validation pseudo-classes.